import React from 'react'
import logoImg from '../../assets/images/images/Index/logo.png';
import { Button } from 'antd';
import xingxing from '../../assets/images/84bf16e44725bc97c403.png'
import { useState } from 'react';
import ana from '../../assets/images/images/Tests/analysis.png'
import del from '../../assets/images/images/Tests/del.png';
// import { Progress } from 'antd';
import { Input, Radio, Space } from 'antd';
import { Checkbox, Col, Row } from 'antd';
import { Progress } from 'antd';
import { useNavigate } from 'react-router-dom'
const Wrongbook = () => {
    const onChangeS = (checkedValues) => {
        console.log('checked = ', checkedValues);
    };
    const navigate = useNavigate()
    const [value, setValue] = useState();
    const onChange = (e) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    function pagres() {
        navigate('/endexam')
    }
    return (
        <div  style={{ backgroundColor: '#f5f7fa', width: '100vw', }}>
            <div className='header'>
                <div className='head'>
                    <div className='header-left'>
                        <img src={logoImg} alt="" style={{ width: '90%' }} />
                    </div>
                    <div className='header-center  header-text'>
                        前端第一阶段阶段考试
                    </div>
                    <div className='header-right'>
                        <span>登录</span>
                        <span>|</span>
                        <span>注册</span>
                    </div>
                </div>
            </div>
            <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
                <div style={{ width: '1000px', display: 'flex', justifyContent: 'space-between' }}>
                    {/* 左边 */}
                    <div className='center-left' style={{ height: '500px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}><div className='one'></div>答题卡</div>
                        <p style={{ fontSize: '8px' }}>单选题（共10题，合计20分）</p>
                        <div className='tow'>
                            <div className='theer'>
                                <div className='bbb'>1</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>2</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>3</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>4</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>5</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>6</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>7</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>8</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>9</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>10</div>
                            </div>
                        </div>
                        <p style={{ fontSize: '8px' }}>多选题（共10题，合计20分）</p>
                        <div className='tow'>
                            <div className='theer'>
                                <div className='bbb'>1</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>2</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>3</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>4</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>5</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>6</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>7</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>8</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>9</div>
                            </div>
                            <div className='theer'>
                                <div className='bbb'>10</div>
                            </div>
                        </div>
                        <div style={{ width: '100%', height: '50px', marginTop: '188px' }} className='answer136'>
                            <div style={{ width: '10px', height: '10px', background: '#726fff', margin: '10px' }}></div>正确<div style={{ width: '10px', height: '10px', background: '#ff4b50', margin: '10px' }}></div>错误
                        </div>
                    </div>
                    {/* 中间题目 */}
                    <div className='center-center'>
                        <div style={{ width: '100%', height: '30px', background: '#f5f5f5', lineHeight: '30px' }}>单选题</div>
                        <div className='topic'>
                            <p>1. 递接文件</p>
                            <Radio.Group onChange={onChange} value={value}>
                                <Space direction="vertical">
                                    <Radio value={'A.  正面朝向对方'}>A.  正面朝向对方</Radio>
                                    <Radio value={'B.  正面朝向对方'}>B.  正面朝向对方</Radio>
                                    <Radio value={'C.  正面朝向对方'}>C.  正面朝向对方</Radio>
                                </Space>
                            </Radio.Group>
                        </div>

                        <div className='topic' style={{ border: '0',height:'270px' }}>
                            <p>正确答案：A</p>
                            <p>答案解析：答非所问，词不达意。</p>

                        </div>
                        <div style={{ width: '100%', height: '50px',}} className='answer136'>
                            <div style={{ width: '15px', height: '15px', margin: '10px', display: 'flex', alignItems: 'center' }}> <img src={ana} style={{ width: '100%', height: '100%', }} /></div> <span>查看解析</span><div style={{ width: '15px', height: '15px', margin: '10px', display: 'flex', alignItems: 'center' }}><img src={del} style={{ width: '100%', height: '100%', }} /></div><span style={{ marginRight: '20px' }}>删除本题</span>
                        </div>

                    </div>
                    {/* 右边倒计时 */}
                    <div className='wrong-right'>
                        <div className='wrong-shang'>
                            <p style={{ textAlign: 'center' }}>当前进度</p>
                            <p style={{ textAlign: 'center', marginBottom: '0px' }}>3/10</p>
                            <Progress percent={30} showInfo={false} />
                        </div>
                        <div className='wrong-center'>
                            <div style={{ width: '90%', height: '50%', borderBottom: '1px solid #eee', marginLeft: '5px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>上一题</div>
                            <div style={{ width: '90%', height: '50%', marginLeft: '5px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>下一题</div>
                        </div>
                        <Button type="primary" style={{ marginTop: '0px', width: '100px', background: '#FFF', color: '#000' }}>返回错题本</Button>
                        <Button type="primary" style={{ marginTop: '15px', width: '100px' }} 
                        >重新复习</Button>
                    </div>
                </div>

            </div>
            <div style={{ width: '100%', height: '60px', background: '#726fff', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' ,marginTop:'30px'}}>Copyright © 2021  成都蜗牛创想科技有限公司 </div>
        </div >
    )
}

export default Wrongbook